/** ##  useEffect  清理副作用
 *  ### 使用场景： 在组件被销毁时，如果有些副作用操作需要被情理，就可以使用此语法，比如常见的定时器。
 *  ### 语法及规则:  useEffect(()=>{
 *                      console.log('副作用函数执行了')
 *                      // 副作用函数的执行时机为：在下一次副作用函数执行之前执行
 *                      return () => {
 *                          console.log('清理副作用的函数执行了')
 *                          // 在这里写清理副作用的代码
 *                      }
 *                   })
 */

// 定时器小案例
// 添加副作用函数前：组件虽然已经不显示了，但定时器依旧在运行

import {useEffect} from 'react'
function Foo() {
    useEffect(()=>{
        const timerId = setInterval(()=>{
            console.log('副作用函数执行了');
        },1000)
        return () => {
            // 添加清理副作用函数后，一旦组件被销毁，定时器也被清理
            clearInterval(timerId)
            console.log('清理副作用的函数执行了');
        }
    })
    return <div>Foo</div>
}
export default Foo